<script setup>
import { computed } from 'vue'

const props = defineProps({
  as: String,
  decorate: Boolean,
  class: String
})

const componentClass = computed(() => [
    'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
  props.decorate ? 'pl-3.5' : null,
  props.class
].filter(Boolean))
</script>

<template>
  <component :is="as || 'p'" :class="componentClass">
    <span v-if="decorate" class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true">
      <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
    </span>
    <slot />
  </component>
</template>

<script>
export default {
  name: 'CardEyebrow',
  props: {
    as: String,
    decorate: Boolean,
    class: String
  }
}
</script>
